<template>
  <div class="container">
    <h2>子组件</h2>
    <p>{{ modelValue }}</p>
    <button @click="sonBtn(1000)">花老爸的钱</button>
  </div>
</template>

<script>
import { watch } from 'vue'
export default {
  // props 接收父组件数据写法和以前一样
  props: {
    modelValue: {
      type: Number,
    },
  },
  // 🔔 setup 钩子函数只执行一次
  //      第一个参数是          props
  //      第二个参数可以解构出   { emit 事件触发器 , attrs 属性, slots 插槽}
  setup(props, { emit }) {
    // this.money
    // 🔔 watch 监听数据，数据变化时就会触发内部代码
    watch(
      () => props.modelValue,
      () => {
        console.log(props.modelValue)
      },
      { immediate: true },
    )

    const sonBtn = number => {
      // 💥 注意：props 不可直接修改，可以把计算结果存到临时变量中
      const temp = props.modelValue - number
      // 父组件可以通过自定义事件 change 获取到结果
      emit('update:modelValue', temp)
      // this.$emit('change', temp)
    }
    return { sonBtn }
  },
}
</script>

<style></style>
